<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="纪德朝">
    <title>列表</title>
    <style>
    div{
        width: 300px;
        margin: 0 auto;
        display: flex;
    }
    ul,li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    div>ul>li{
        text-align: center;
        width: 150px;
        height: 30px;
        line-height: 30px;
        border: 1px solid black;     
        font-size: 20px;   
    }
    .current{
        position: relative;
    }
    .active{
        position: absolute;
        display: none; 
    }
    .active li{
        text-align: center;
        width: 150px;
        height: 25px;
        line-height: 25px;
        border: 1px solid black;
    }
    .active li:hover{
        background-color: gray;
    }
    p{
        font-size: 100px;
        text-align: center;
    }
</style>
</head>
<body>
    <div>
        <ul class="current">
            <li>销售订单</li>
            <ul class="active">
                <li>订单1</li>
                <li>订单2</li>
                <li>订单3</li>
            </ul>
        </ul>
        <ul class="current">
            <li>消费订单</li>
            <ul class="active">
                <li>消费1</li>
                <li>消费2</li>
                <li>消费3</li>
            </ul>
        </ul>            
    </div>
    <p></p>
    <script src="./js/jquery.js"></script>
</body>
<script>
    $('.current').mouseover(function(ev){
        // console.log(ev.target);
        console.log($(this).index());
        // $(this).find('.active').css('display','block');
        $('.active').eq($(this).index()).show();
        
    })
    $('.current').mouseout(function(ev){
        //  $(this).find('.active').css('display','none');
        $('.active').eq($(this).index()).hide();
    });
    $('.active li').click(function(){
        // console.log($(this).index());
        $('p').text($(this).html());
        $('.active').css('display','none');
    })
</script>
</html>